<template>
    <Modal v-model="show" :title="title">
        <div class="x-body">
            <div class="x-poples" v-show="people=='teacher'">
                <div class="x-trees">
                    <RadioGroup v-model="partype" type="button" size="small">
                        <Radio label="dus">职务</Radio>
                        <Radio label="dep">部门</Radio>
                    </RadioGroup>
                    <div style="height:10px"></div>
                    <Tree :data="trees" :load-data="loadData" show-checkbox @on-check-change="checked" v-show="partype=='dep'"></Tree>
                    <Tree :data="duties" show-checkbox @on-check-change="zwchecked" v-show="partype=='dus'"></Tree>
                </div>
                <div class="x-pels">
                    <Button type="primary" size="small" long @click="chax" :loading="loading" style="margin-bottom:3px">查询</Button>
                    <Tree :data="peptrees" show-checkbox ref="peos"></Tree>
                </div>
            </div>
            <div class="x-poples" v-show="people=='student'">
                <div class="x-trees">
                    <Tree :data="trees2" :load-data="loadClass" show-checkbox @on-check-change="checked2"></Tree>
                </div>
                <div class="x-pels">
                    <Button type="primary" size="small" long @click="chax2" :loading="loading" style="margin-bottom:3px">查询</Button>
                    <Tree :data="students" show-checkbox ref="stus"></Tree>
                </div>
            </div>

            <div class="x-poples" v-show="people=='parent'">
                <div class="x-trees">
                    <Tree :data="trees3" :load-data="loadParent" show-checkbox @on-check-change="checked3"></Tree>
                </div>
                <div class="x-pels">
                    <Button type="primary" size="small" long @click="chax3" :loading="loading" style="margin-bottom:3px">查询</Button>
                    <Tree :data="parents" show-checkbox ref="pars"></Tree>
                </div>
            </div>
        </div>
        <div class="x-footer" slot="footer" style="text-align:center">
            <Button type="primary" size="small" style="width:50%" @click="ok">确认</Button>
        </div>
    </Modal>
</template>

<script>
export default {
	// name: 'modal',
	data() {
		return {
			mshow: false,
            mshow: false,
            trees: [],
            trees2: [],
            trees3: [],            
            students: [],
            parents:[],
            peptrees: [],
            // 部门id数组
            depart_ids: [],
            // 年级id数组
            class_ids: [],
            // 职务id数组
            dutie_ids: [],
            parent_ids: [],            
			teaes_ids: [],
            loading: false,
            duties: [],
            partype: 'dus'
		}
	},
	props: {
		value: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		},
		people: {
			type: String,
			default: 'teacher'
		}
	},
	methods: {
		ok() {
            this.show = false
            let ids = this.people=='teacher'? this.$refs.peos.getCheckedNodes() : (this.people=='student' ? this.$refs.stus.getCheckedNodes() : this.$refs.pars.getCheckedNodes())          
			this.$emit('on-ok',ids)
        },
        load() {
            this.$http.get('api/user/v1/department/info').then(res=>{
				let arr = this.process(res.data)
                this.trees = arr
                // console.log('bm',this.trees)		                 
			}).catch(err => {
				this.$Message.error('部门加载失败！');	
			})
        },
        zwload() {
            this.$http.get('api/user/v1/get/duties/list').then(res=>{
				this.duties = res.data.map(item=> ({
                    value: item.id,
                    title: item.duties_name.zh?item.duties_name.zh:item.duties_name.mn
                }))	                 
			}).catch(err => {
				this.$Message.error('职务加载失败！');	
			})
        },
        loadGrade() {
            this.$http.get('api/base/v1/get/grade/list').then(res=>{
				this.trees2 = res.data.map(item=>({
                    id: item.id,
                    title:item.grade_name.zh?item.grade_name.zh:item.grade_name.mn,
                    loading: false,
                    children: []
                }))	                 
			}).catch(err => {
				this.$Message.error('年级加载失败！');	
			})
        },
        loadParentGrade() {
            this.$http.get('api/base/v1/get/grade/list').then(res=>{   
				this.trees3 = res.data.map(item=>({
                    id: item.id,
                    title:item.grade_name.zh?item.grade_name.zh:item.grade_name.mn,
                    loading: false,
                    children: []
                }))                
			}).catch(err => {
				this.$Message.error('年级加载失败！');	
			})
        },
		process(data) {
            let arr = []
			data.forEach(item => {
				item.title = item.label = item.department_name.zh?item.department_name.zh:item.department_name.mn
                item.value = item.id
				if(item.childs) {
					item.loading = false,
                    item.children = []
                    
                }
                arr.push(item)
                
			})
			return arr
		},
		loadData(item, callback) {
            this.$http.get('api/user/v1/department/info?pid='+item.id).then(res=>{
				callback(this.process(res.data))             
			}).catch(err => {
				this.$Message.error('子部门加载失败！');	
			})
        },
        loadClass(item, callback) {
            this.$http.get('api/eclass/v1/eclass/eclasslist/'+item.id).then(res=>{
				callback(res.data.map(item=>({
                    cid: item.eclass_id,
                    title: item.eclass_name.zh?item.eclass_name.zh:item.eclass_name.mn
                })))           
			}).catch(err => {
				this.$Message.error('班级加载失败！');	
			})
        },
        loadParent(item, callback) {
            this.$http.get('api/eclass/v1/eclass/eclasslist/'+item.id).then(res=>{
                callback(res.data.map(item=>({
                    pid: item.eclass_id,
                    title: item.eclass_name.zh?item.eclass_name.zh:item.eclass_name.mn
                })))          
			}).catch(err => {
				this.$Message.error('班级加载失败！');	
			})
        },
		checked(data) {
            this.depart_ids = data.map(item=>item.id)
        },
        zwchecked(data) {
            this.dutie_ids = data.map(item=>item.value)
        },
		checked2(data) {
            let ids = data.map(item=>item.cid)
            this.class_ids = ids.filter(item=>item)
		},
        checked3(data) {          
            let ids = data.map(item=>item.pid)
            this.parent_ids = ids.filter(item=>item)
		},
		chax() {
            let url
            if(this.partype=='dep') {
                url = 'api/user/v1/get/teacher/user/list?department_id='+JSON.stringify(this.depart_ids)
            } else {
                url = 'api/user/v1/get/teacher/user/list?duties_id='+JSON.stringify(this.dutie_ids)
            }
			this.loading = true
            this.$http.get(url).then(res=>{
				let trdate = res.data.map(item=>({
                    id: item.user_id,
					title: item.teacher_name.zh?item.teacher_name.zh:item.teacher_name.mn,
				}))
				this.peptrees = trdate
				this.loading = false       
			}).catch(err => {
				this.$Message.error('人员获取失败！');	
			})
        },
		chax2() {
			this.loading = true
			let ids = JSON.stringify(this.class_ids)
            this.$http.get('api/student/v1/studentsinfo/students_info?eclass_id='+ids).then(res=>{
				let trdate = res.data.map(item=>({
                    id: item.user_id,
					title: item.student_name.zh?item.student_name.zh:item.student_name.mn,
					checked: true
				}))
				this.students = trdate
				this.loading = false     
			}).catch(err => {
				this.$Message.error('学生获取失败！');	
			})
        },
        chax3() {
			this.loading = true
            let ids = JSON.stringify(this.parent_ids)
            this.$http.get('api/parents/v1/parents/parentinfo_lists?eclass_id='+ids).then(res=>{
                let trdate;
                let arr=[];
                if(res.data.length!=0){
                    res.data.forEach((items,ind)=>{
                        trdate = items.relation.map(item=>({
                            id: item.parents_id,
                            title: item.parent_lists.parents_name.zh?item.parent_lists.parents_name.zh:item.parent_lists.parents_name.mn,
                            checked: true
                        }))
                          
                        if(trdate.length!=0){                           
                            arr = arr.concat(trdate)                                                                                          
                        }                                      
                    })  
                }
                this.parents = arr                                               
                this.loading = false 
			}).catch(err => {
                this.$Message.error('家长获取失败！');	
                this.loading = false      
			})
        }
	},
	computed: {
		show: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit('input',val)
			}
		}
    },
    created() {
        if(this.people=='teacher') {
            this.load()
            this.zwload()
        } else if(this.people=='student') {
            this.loadGrade()
        } else{
            this.loadParentGrade()            
        }
	}
}
</script>

<style lang="less">
#r-x-modal {
    .modal-wrap {
        position: fixed;
        top: 0; left: 0; bottom: 0; right: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 1000;
    }
    .x-modal {
        position: fixed;
        top: 80px;
        left: 30%;
        z-index: 1110;
        width: 600px;
        height: 600px;
        background: #fff;
        border-radius: 3px;
        .x-header {
            height: 45px;
            background: #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            .t {
                font-size: 16px;
                padding-left: 16px;
            }
            .c {
                font-size: 23px;
                color: #888;
                padding: 18px;
                cursor: pointer;
                &:hover {
                    color: #666;
                }
            }
        }
        .x-body {
            overflow: hidden;
            height: 85%;
        }
        .x-footer {
            padding: 8.5px 15px;
            border-top: 1px solid #eee;
            text-align: center;
        }
    }
}


.x-poples {
	height: 100%;
	display: flex;
	align-items: stretch;
	.x-trees {
		padding: 7px 30px; 
        border-right:1px solid #ddd;
        height: 500px;
		overflow: auto;
		width: 300px;
	}
	.x-pels {
		padding: 7px 30px;
        width: 300px;
        height: 500px;
		overflow: auto;
		// border-right:1px solid #ddd;
	}
}

.fade-enter-active, .fade-leave-active {
	transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
	opacity: 0;
}

.scale-enter-active, .scale-leave-active {
	transition: all .2s;
}
.scale-enter, .scale-leave-to {
	transform: translateY(180px);
	opacity: 0;
}
</style>